<%--
  Created by IntelliJ IDEA.
  User: Dell
  Date: 2021/2/18
  Time: 10:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getServerName() + ":" + request.getServerPort() + path + "/";
    String baseUrlPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
    pageContext.setAttribute("baseUrlPath", baseUrlPath);
%>
<html>
<head>
    <title>Title</title>
    <script src="<%=request.getContextPath()%>/static/js/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/common.css">
    <%--引入CKEditor编辑器--%>
    <script src="<%=request.getContextPath()%>/static/ckeditor/ckeditor.js"></script>
</head>
<body>
<%--enctype="multipart/form-data"便是表单中技能有文件也能有表单域--%>
<form name ="dataFrm" id="dataFrm" action="doAdd.jsp"
      method="post" enctype="multipart/form-data" >
    <table  width="100%" border="0" cellspacing="5" cellpadding="0">
        <thead>
        <tr><td align="center" colspan="2" class="text_tabledetail2">增加新闻</td></tr>
        </thead>
        <tbody>
        <tr>
            <td style="text-align:right;" class="text_tabledetail2">分类</td>
            <td style="text-align:left;">
                <!-- 列出所有的新闻分类 -->
                <select name="categoryId">
                    <option value="1">国内</option>
                    <option value="2">国际</option>
                    <option value="3">娱乐</option>
                    <option value="4">军事</option>
                    <option value="5">财经</option>
                    <option value="6">天气</option>
                </select>
            </td>
        </tr>
        <tr>
            <td style="text-align:right;" class="text_tabledetail2">标题</td>
            <td style="text-align:left;"><input type="text" name="title" value=""/></td>
        </tr>
        <tr>
            <td style="text-align:right;" class="text_tabledetail2">作者</td>
            <td style="text-align:left;"><input type="text" name="author" value=""/></td>
        </tr>

        <tr>
            <td style="text-align:right;" class="text_tabledetail2">摘要</td>
            <td style="text-align:left;"><textarea id="summary" name="summary" rows="8" cols="50"></textarea></td>
        </tr>
        <tr>
            <td style="text-align:right;" class="text_tabledetail2">内容</td>
            <td style="text-align:left;">
                <div id="xToolbar"></div>
                <textarea id="content" name="content"
                          class="ckeditor"></textarea></td>
        </tr>
        <tr>
            <td style="text-align:right;" class="text_tabledetail2">上传图片 </td>
            <td style="text-align:left;"><input type="file" id="picPath" name="picPath" value=""/>
            <div id="imgDiv" style="display: none;width: 100px;height: 100px;margin-left: 30px;"></div>
            </td>
        </tr>
        <tr>
            <td style="text-align:center;" colspan="2">
                <button type="submit" class="page-btn" name="save">保存</button>
                <button type="button" class="page-btn" name="return" onclick="javascript:location.href='newsDetailList.jsp'">返回</button>
            </td>
        </tr>
        </tbody>
    </table>
</form>

<script>
    //通过jQuery监听文件域的操作
    $("#picPath").change(function () {
        //获取选择的文件
        var file = this.files[0];
        //js中提供了文件阅读器
        var fileReader = new FileReader();
        //文件阅读器读取文件数据
        fileReader.readAsDataURL(file);
        fileReader.onload=function (e) {
            //e表示一个事件，在这里表示加载事件
            //当要上传的文件，被文件阅读器加载完后，在一个div中显示
            $("#imgDiv").show(2000).html("<img style='width:100px;height:100px' src='"+e.target.result+"'/>")
            //e.target.result---target表示在哪个对象中产生的，result表示加载后的结果
        }

    })


</script>

</body>
</html>
